<template>
  <div class="pag">
    <div class="container bgc_yell ">
     <div class="">  <img class="bg_img" src="../../public/img/top_ccc.jpg" alt=""></div></div>
    
    <!-- body -->
    <div class="home-module home-menu container" >
            <a href="javascript:void(0);" v-for="(val,index) in pic" :key="index">
                <img :src="val.img" alt="新品" title="新品">
            </a>          
        </div>
      <h4 class="home-module-title">
                新品
                <span>/</span>
                <span>专区</span>
            </h4>
            <div class="container img_top">
              <a href=""><img src="../../public/img/menu-top-1.jpg"></a>
              
            </div>
            <!-- ul li  -->
           <br>
      <div class="container img_i5">
                      <div class="bg-coo" v-for="(val,index) in xinpin" :key="index">
                        <a href="#" class="">
                                <img class="img_gg" :src="val.img" alt="">
                                 </a>                             
                          <p>------------------------------------------</p>
                          <span class="a1">{{val.sp}}</span>
                                <span class="a1">{{val.xp}}</span>
                                <span class="a1">{{val.sr}}</span>
                          <p>{{val.price}}</p>
                          <button @click="mtk(val.img, val.sp, val.price)"
                          data-toggle="modal"
          data-target="#exampleModal">立即购买</button>
                      </div>
                      
                           
      </div>
 <br><br>
<h4 class="home-module-title">
                生日
                <span>/</span>
                <span>专区</span>
            </h4>
            <div class="container img_top">
              <a href=""><img src="../../public/img/menu-top-2.jpg"></a>
              
            </div>
            <!-- ul li  -->
           <br>
           <div class="container img_i5">
                       <div class="bg-coo" v-for="(val,index) in shengri" :key="index">
                        <a href="#" class="">
                                <img class="img_gg" :src="val.img" alt="">
                                 </a>                             
                          <p>------------------------------------------</p>
                          <span class="a1">{{val.sp}}</span>
                                <span class="a1">{{val.xp}}</span>
                                <span class="a1">{{val.sr}}</span>
                          <p>{{val.price}}</p>
                          <button>立即购买</button>
                      </div>
        
                           
      </div>
      <br><br>
      <h4 class="home-module-title">
                儿童
                <span>/</span>
                <span>专区</span>
            </h4>
            <div class="container img_top">
              <a href=""><img src="../../public/img/menu-top-3.jpg"></a>
              
            </div>
            <!-- ul li  -->
           <br>
           <div class="container img_i5">
                       <div class="bg-coo" v-for="(val,index) in ertong" :key="index">
                        <a href="#" class="">
                                <img class="img_gg" :src="val.img" alt="">
                                 </a>                             
                          <p>------------------------------------------</p>
                          <span class="a1">{{val.sp}}</span>
                                <span class="a1">{{val.xp}}</span>
                                <span class="a1">{{val.sr}}</span>
                          <p>{{val.price}}</p>
                          <button>立即购买</button>
                      </div>
                           
      </div>
      <br><br>
      <h4 class="home-module-title">
                聚会
                <span>/</span>
                <span>专区</span>
            </h4>
            <div class="container img_top">
              <a href=""><img src="../../public/img/menu-top-4.jpg"></a>
              
            </div>
            <!-- ul li  -->
           <br>
           <div class="container img_i5">
                      <div class="bg-coo" v-for="(val,index) in ertong" :key="index">
                        <a href="#" class="">
                                <img class="img_gg" :src="val.img" alt="">
                                 </a>                             
                          <p>------------------------------------------</p>
                          <span class="a1">{{val.sp}}</span>
                                <span class="a1">{{val.xp}}</span>
                                <span class="a1">{{val.sr}}</span>
                          <p>{{val.price}}</p>
                          <button>立即购买</button>
                      </div>
                           
      </div>
       <br><br>
      <h4 class="home-module-title">
                廿一客 
                <span>/</span>
                <span>文章</span>
            </h4>
            <div class="container img_top xiang_cc">
              <div class="bk_xx">
                <img class="reader-1" src="../../public/img/reader-1.jpg">
                <p>冬季刊·进博会</p>
                <span>阅读全文>></span>
                </div> 
             <div class="bk_xx">
               <img class="reader-1" src="../../public/img/reader-2.jpg">
                 <p>廿一志秋刊·客服Q&A</p>
                <span>阅读全文>></span>
               
             </div>
              
            </div>
    <!-- 尾部 -->
<div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">商品信息</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-4 bgc-big">
                  <img :src="img_ii" class="card-img-top" alt="..." />
                </div>
                <div class="col-md-1"></div>
                <div class="clear_fix col-md-7">
                  <button class="btn_1">❤</button>
                  <div class="xinxin">
                    <p>★★★★☆<span>4星</span></p>
                  </div>
                  <h5 class="title f_left">
                    <span>{{ namee }}</span>
                    <!---->
                    <p>
                      Curabitur non nulla sit amet nisl tempus convallis qui
                      aclectus。
                    </p>
                  </h5>
                  <div class="price_wrap f_right ">
                    <p class="new_price">
                      <span>{{ pr_icee }}</span>
                    </p>
                    <!---->
                    <!---->
                    <!---->
                  </div>
                </div>

                <!-- 右边布局 -->
                <div class=" right_font">
                  <div class="title_wrap clear_fix">
                    <!---->
                    <a href="" class="aha_entrance">
                      <img
                        src="//newimgcdn.lapetit.cn/web/images/aha/aha_link.png?2019112001"
                        alt=""
                      />
                    </a>
                    <div class="leng_d">
                      <span>❄</span>
                      <span class="zzz">保鲜条件：0-4℃冷藏，5℃食用最佳</span>
                    </div>
                    <!---->
                  </div>
                </div>
                <br />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="you">
              <span @click="del()">
                -
              </span>
              <input
                type="text"
                name="zjia"
                id="txt"
                v-model="val_ue"
                @change="kog"
                oninput="value=value.replace(/[^\d]|^[0]/g,'')"
              />
              <span @click="add()">
                + </span
              >&nbsp;
              <button
                class="btn_2"
                data-dismiss="modal"
                aria-label="Close"
                @click="btn_buy"
              >
                <router-link to="/trolley">
                  立即购买
                </router-link>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
<!-- 底部标签· -->
 
  </div>
</template>
<script>
export default {
  data(){
    return {
      val_ue: 1,
      img_ii: "",
      namee: "",
      pr_icee: "",
      pic:[],
      xinpin:[],
      shengri:[],
      ertong:[],
      juhui:[],
      // pic:[
      //   {img:'./img/menu-1.jpg'},
      //   {img:'./img/menu-2.jpg'},
      //   {img:'./img/menu-3.jpg'},
      //   {img:'./img/menu-4.jpg'},
      //   {img:'./img/menu-5.png'},
      // ],
      // xinpin:[
      //   {img:'./img/xinpin-cake-1.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/xinpin-cake-2.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/xinpin-cake-3.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/xinpin-cake-4.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      // ],
      // shengri:[
      //   {img:'./img/shengri-cake-1.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/shengri-cake-2.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/shengri-cake-3.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/shengri-cake-4.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      // ],
      // ertong:[
      //   {img:'./img/child-cake-1.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/child-cake-2.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/child-cake-3.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/child-cake-4.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      // ],
      // juhui:[
      //   {img:'./img/party-cake-1.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/party-cake-2.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/party-cake-3.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      //   {img:'./img/party-cake-4.png',sp:"儿童",xp:"新品",sr:"生日",price:"¥298.00/454g"},
      // ],
    }
  },
  mounted(){
    this.$axios.get('http://47.114.130.21:3001/about').then((data)=>{
      console.log(data);
      this.pic=JSON.parse(data.data[0].pic) 
      this.xinpin=JSON.parse(data.data[0].xinpin)
      this.shengri=JSON.parse(data.data[0].shengri)
      this.ertong=JSON.parse(data.data[0].ertong)
      this.juhui=JSON.parse(data.data[0].juhui)
    })
  },
  methods:{
    mtk(img_i, name, pr_ice) {
      this.img_ii = img_i;
      this.namee = name;
      this.pr_icee = pr_ice;
    },
    kog(){
      if(this.val_ue==""){
        this.val_ue=1
      }
    },
     btn_buy() {
      var obj = {};
      //   // 图片路径
      obj.imglj = this.img_ii;
      //   // 价钱
      var price_buy = parseInt(this.pr_icee.substring(1));
      obj.jiaqwb = price_buy;
      //   // 商品名
      obj.shangpmwb = this.namee;
      //   // 数量
      this.val_ue = parseInt(this.val_ue);

      obj.shuliang = this.val_ue;
      obj.stat =false
      obj.total= this.val_ue*price_buy
      this.$store.commit("add", obj);

      for (var j = 0; j < this.$store.state.arr.length; j++) {
        for (var i = j + 1; i < this.$store.state.arr.length; i++) {
          if (this.$store.state.arr[i].shangpmwb ==this.$store.state.arr[j].shangpmwb) {
            this.$store.state.arr[j].shuliang =this.$store.state.arr[j].shuliang + obj.shuliang;
            this.$store.state.arr.splice(i, 1);
            this.$store.getters.getCount.num--
            i--;
          }
        }
      }
    }
  }
}
</script>
<style lang="less">
.btn_2 a{
  color: #fff;
  text-decoration: none;
}
.img_xinpin {
  position: absolute;
  top: 10px;
}
.img_xinpin img {
  width: 60px;
  height: 20px;
}
.sc_coco p {
  color: #a88866;
  font-size: 16px;
}
.sc_coco button {
  width: 70px;
  height: 24px;
  font-size: 12px;
  //background-color: powderblue;
  border: 0px solid;
  background: #d49a5b;
  color: #fff;
  padding: 0 5px;
  float: right;
  margin-top: -34px;
  outline: none;
}
.sc_coco button:hover {
  background: #a17e59;
}
.sc_coco div button a {
  color: #fff;
  text-decoration: none;
}
.bgc-big img {
  width: 100%;
  height: 150px;
  margin-top: 6px;
}
.new_price,
.taste_left {
  font-size: 16px;
  color: #816b4e;
}
.aha_entrance img {
  width: 445px;
}
.btn_1 {
  margin-top: 7px;
  background-color: #fff;
  border: 1px solid #eee;
  color: pink;
}
.btn_2 {
  width: 100px;
  height: 48px;
  font-size: 16px;
  background-color: #634832;
  border: 1px solid #eee;
  color: rgb(255, 255, 255);
  padding-top: 5px;
  margin-right: 15px;
  position: relative;
  top: -6px;
}
.xinxin p {
  background-color: #fff;
  color: #816b4e;
  font-size: 20px;
}
.xinxin span {
  font-size: 16px;
  background-color: #fff;
  color: #c58181;
  margin: -2px 0 0 5px;
}
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
.f_left span {
  font-size: 16px;

  color: #816b4e;
}
.f_left p {
  margin-top: 7px;
  font-size: 16px;

  color: #816b4e;
}
.you {
  padding-left: 3px;
}
.you span {
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 40px;
  height: 49px;
  border: 1px solid #f0f2f3;
  background-color: #fff;
  transition: 0.3s;
}
.you input {
  background-color: #fff;
  outline: none;
  width: 50px;
  height: 49px;
  text-align: center;
  border: 1px solid #f0f2f3;
}
.cheng_fen h5 {
  font-weight: bold;
  margin-top: 13px;
  font-size: 16px;
}
.cheng_fen h5 span {
  margin-top: 10px;
  margin-left: 20px;
  color: #ac8585;
}
.leng_d {
  font-size: 24px;
  color: rgb(113, 238, 238);
}
.zzz {
  margin: -10px 0 0 20px;
  font-size: 14px;
  color: #665e5e;
}
  .bg_img{
    width: 100%;
   // max-height: 500px;
  //  margin-top:-30px;
  }
  .wh_to{
    margin-top: 18px;
  }
  .home-menu{
     display: flex;
  justify-content: space-around;
  }
  .home-menu a img {
  margin-top: 30px;
    width: 200px;
    height: 100px;
    border: 1px solid #eee;
   border-radius: 5%;
   box-shadow: 3px 3px 20px 5px rgb(241, 238, 239);
    opacity: 0.9;
}
.home-module-title{
font-size: 24px;
    color: #724228;
    line-height: 36px;
    width: 1100px;
    margin: 0 auto 20px;
    margin-top: 5rem;
}
.home-module-title span{
  font-size: 16px;
  padding: 0px 7px 0px 7px;
}
h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.img_top a img {
     //  display: inline-block;
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 260px;
    background: #fafafa url(../../public/img/menu-top-1.jpg) center no-repeat;
    background-size: auto 100%;
}
.img_i5{
    display: flex;
  justify-content:space-between;
}
.img_gg{
  width: 250px;
  height: 200px;
}
.bg-coo{
    background-color:#fafafa;
    border-radius: 5px;
    height: 200px;
    margin-top: -5px;
}
.bg-coo .a1{
    border: 1px solid #D5BFA7;
    border-radius: 100px;
    padding: 0px 7px 0 8px;
    color: #D5BFA7;
    margin: 3px 3px;
    font-size:12px;
}
.bg-coo p{
   color: #D5BFA7;
   font-size:16px;
}
.bg-coo button{
  width: 70px;
  height: 24px;
  font-size: 12px;
  //background-color: powderblue;
   border: 0px solid;
    background: #643128;
    color: #fff;
    padding: 0 5px;
    float: right;
    margin-top:-38px;
}

.bgc_yell{
  background-color:#f9f9f9;
  height: 342px;
  line-height: 336px;
  margin-top: 15px;
}
.reader-1{
  width: 500px;
  height: 240px;
  border-radius: 8px 8px 0 0;
}
.xiang_cc{
  display: flex;
  justify-content: space-around;
}
.xiang_cc div span{
  font-size: 12px;
   margin-left: 16px;
   color: #ad814b;
}
.xiang_cc div p{
  margin-top: 3px;
  font-size: 20px;
  margin-left: 16px;
}
.bk_xx{
  border: 2px solid #eee;
  border-radius: 10px;
  box-shadow: 3px 3px 15px 5px rgb(240, 235, 236);
}


  </style>

